<!--
 * @Author: Neil 1294641898@qq.com
 * @Date: 2022-09-04 21:43:58
 * @LastEditors: Neil 1294641898@qq.com
 * @LastEditTime: 2022-09-07 10:37:58
 * @FilePath: \stupid_home\src\components\register.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="register">
        <van-nav-bar
        title=""
        left-text="返回"    
        left-arrow
        @click-left="goBack"
        />
        <h1 style="margin-top: 60px;">{{ msg }}</h1>
    <van-image
      round
      width="200"
      height="150"
      :src="require('../../assets/login/login.png')"
    />
    <div class="load">
      <van-form @submit="register">
      <van-field
      class="frombox"
        v-model="username"
        name="username"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        class="frombox"
        v-model="token"
        name="token"
        label="原子云ID"
        placeholder="原子云token"
        :rules="[{ required: true, message: '请填写token' }]"
      />
      <van-field
        class="frombox"
        v-model="password"
        type="password"
        name="password"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" >注册</van-button>
      </div>
      </van-form>

    </div>
  </div>
</template>
<script>
export default {
    name: 'register',
    data(){
    return{
        msg:"笨蛋注册",
        username: '',
        password: '',
        token:"",
    }
    },
    methods: {
      goBack() {
        this.$destroy();
        this.$router.push('/login');
    },
    //注册账号，先验证原子云token，顺便保存到数据库中，登录用
    async register(){
      if (await this.checkToken()) {
        console.log(this.username, this.password, this.token);
        await this.$axios.post("user/register", 
        {
          username: this.username,
          password: this.password,
          api_token: this.token
          }, {
            headers: {
          'Content-type': 'multipart/form-data'
        },
        }
        
        ).then((res) => {
          if (res.status == 200) {
            this.$notify({ type: "success", message: "注册成功" })
            localStorage.setItem("username", this.username)
            localStorage.setItem("password",this.password)
            this.$router.push("/login")
          } else {
            this.$notify({type:"warning",message:"注册失败，请检查网络"})
          }
        })
      } else {
        if(this.token!="")
        this.$notify({type:"warning",message:"原子云token非法"})
        this.token=""
      }
    },
      // 注册时检测token是否合法
      async checkToken() {
        let result = await this.$axios.get("api/orgs",{
        headers:{'token':this.token}
        })
        return result.data.code==200
      }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.register{
    width: 100%;
    height: 100%;
    overflow: hidden;
    text-align: center;
    color: #2c3e50;
    .van-image {
        margin:20px 0
      }
      .load{
      width:80%;
      margin:0 auto
    }
}

</style>
